<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            /* 隐藏body窗口区域滚动条 */
            overflow: hidden;
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
</head>

<body>
    <script>
        /**
         * 创建场景对象
         */
        var scene = new THREE.Scene();

        var loader = new THREE.ObjectLoader(); //模型加载器
        // 加载模型文件，加载"model.json"文件返回一个网格模型对象，包含玉镯的几何体和包含纹理贴图的材质
        loader.load("model.json", function (Object3D) {
            Object3D.scale.set(3, 3, 3);//对象缩放操作
            Object3D.geometry.center();// 玉镯网格模型的几何体geometry居中
            Object3D.position.set(0, 0, 0);//玉镯网格模型位置设置
            // 玉镯对象添加到场景
            scene.add(Object3D)
        });
        /**
         * 相机设置
         */
        var width = window.innerWidth;//窗口宽度
        var height = window.innerHeight;//窗口高度
        var k = width / height;//窗口宽高比
        var s = 100;//三维场景缩放系数
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 20, 200);//设置相机位置
        camera.lookAt(scene.position);//设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);//body元素中插入canvas对象
        function render() {
            renderer.render(scene, camera);//执行渲染操作
            requestAnimationFrame(render);
        }
        render();
    </script>
</body>

</html>